{#if quarkus.platform.version.compareVersionTo("3.9") < 0}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>{project.artifact-id} - {project.version}</title>
        <style>
            body {
                margin: 0;
                font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
            }
            code {
                font-family: "Courier New", monospace;
                color: #e83e8c;
                word-break: break-word;
            }
            h1, h2, h3, h4, h5, h6 {
                margin-bottom: 0.5rem;
                font-weight: 400;
                line-height: 1.5;
            }
            h1 { font-size: 2.25rem; }
            h2 { font-size: 1.6rem }
            h3 { font-size: 1.5rem }
            h4 { font-size: 1.4rem }
            h5 { font-size: 1.25rem }
            h6 { font-size: 1rem }
            p {
                padding: .15rem 0;
                margin: 0;
                line-height: 1.3rem;
            }
            a {
                text-decoration: underline;
                color: #1259A5;
            }
            a:hover, a:active { color: #c00; }
            .grid {
                display: grid;
                grid-template-columns: repeat(12, 1fr);
                clear: both;
            }
            .header-wrapper {
                padding: 0 13rem;
                background: black;
            }
            .banner-wrapper {
                padding: 0 13rem;
                background: url() repeat-x, #0D1C2C;
            }
            .content-wrapper {
                padding: 0 13rem;
                background: white;
            }
            .header {
                background-position: 0 1rem;
                min-height: 60px;
                grid-column: span 12;
            }
            #quarkus-logo-svg {
                width: 200px;
                height: 30px;
                padding-top: 1rem;
            }
            .banner {
                grid-column: span 12;
                padding: 2rem 0;
            }
            .callout {
                color: white;
                font-size: 3.5rem;
                margin: 0;
                padding-top: 5rem;
                grid-column: span 8;
            }
            .app-details {
                margin: 1rem 0;
                border: 1px solid lightgrey;
                padding: 1rem;
                background: white;
                font-size: .75rem;
                font-weight: 300;
                grid-column: span 4;
            }
            .app-details code { font-size: 87.5%; }
            .app-details ul {
                list-style-type: none;
                padding: 0;
                margin: 0;
            }
            .app-details ul li { margin-bottom: 0.2rem; }
            .app-details h5 {
                margin: 0;
                padding: 0;
            }
            .left-column {
                grid-column: span 8;
                padding-right: 3rem;
            }
            .left-column p {
                padding: .15rem 0;
                margin: 0;
                font-weight: 300;
            }
            .left-column ul {
                margin: 0;
                padding: 10px 0 0 25px;
                list-style-type: "\1F680";
                font-weight: 300;
            }
            .left-column li { padding-left: 10px; }
            .left-column .cta-button {
                margin: 20px 0;
                display: inline-block;
                padding: 1rem 2rem;
                background-color: #4695EB;
                font-weight: 600;
                color: white;
                text-decoration: none;
                text-transform: uppercase;
            }
            .right-column {
                grid-column: span 4;
                margin-top: 1rem;
                font-weight: 200;
            }
            .right-column h5 {
                padding: 1rem 0 .25rem 0;
                margin: 0;
                font-weight: 300;
            }
            .right-column h3 { font-weight: 400;}
            .right-column ul {
                margin: 0;
                list-style-type: circle;
            }
            .right-column li {
                padding: .5rem 0 0 0;
            }
            .provided-code {
                line-height: 20px;
            }
            .provided-code b {
                font-weight: 400;
                margin-bottom: 15px;
            }
            @media screen and (max-width: 1023px) {
                .header-wrapper {
                    padding: 0 1rem;
                    background: black;
                }
                .banner-wrapper { padding: 0 1rem; }
                .content-wrapper {
                    padding: 0 1rem;
                    background: white;
                }
                .left-column {
                    grid-column: span 12;
                }
                .right-column {
                    grid-column: span 12;
                    margin: 3rem 0;
                }
                .callout {
                    color: white;
                    font-size: 3.5rem;
                    margin: 0;
                    padding: 1rem 0;
                    grid-column: span 12;
                }
                .app-details {
                    margin: 1rem 0;
                    border: 1px solid lightgrey;
                    padding: 1rem;
                    background: white;
                    font-size: 1rem;
                    font-weight: 300;
                    grid-column: span 12;
                }
            }
        </style>
    </head>
    <body>
        <div class="header-wrapper">
            <div class="grid">
                <div class="header">
                    <svg id="quarkus-logo-svg" data-name="Quarkus Logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 195">
                        <defs>
                            <style>.cls-1 {
                                fill: #fff;
                            }

                            .cls-2 {
                                fill: #4695eb;
                            }

                            .cls-3 {
                                fill: #ff004a;
                            }</style>
                        </defs>
                        <title>quarkus_logo_horizontal_rgb_1280px_reverse</title>
                        <path class="cls-1"
                              d="M404,89.39q0,25.9-10.49,43.07a52.31,52.31,0,0,1-29.61,23.24l32.3,33.39H373.29l-26.45-30.44-5.11.19q-30,0-46.27-18.22T279.17,89.2q0-32.93,16.34-51.05T341.92,20q29.24,0,45.66,18.45T404,89.39Zm-108.14,0q0,27.39,11.74,41.55t34.11,14.15q22.56,0,34.07-14.11t11.51-41.59q0-27.21-11.47-41.27T341.92,34.05q-22.56,0-34.3,14.16T295.88,89.39Z"/>
                        <path class="cls-1"
                              d="M559.56,22.15V109.4q0,23.05-14,36.25T507,158.84q-24.51,0-37.92-13.29T455.7,109V22.15h15.78v88q0,16.88,9.28,25.91t27.29,9q17.16,0,26.45-9.08T543.78,110V22.15Z"/>
                        <path class="cls-1"
                              d="M703.6,157,686.7,114.1H632.31L615.6,157h-16L653.29,21.6h13.27L719.93,157Zm-21.82-57L666,58.21q-3.07-7.92-6.32-19.46a172.55,172.55,0,0,1-5.85,19.46l-16,41.78Z"/>
                        <path class="cls-1"
                              d="M777.19,100.92V157H761.4V22.15h37.23q25,0,36.89,9.5t11.93,28.59q0,26.74-27.29,36.16L857,157H838.35l-32.86-56.07Zm0-13.47h21.62q16.71,0,24.51-6.6t7.79-19.78q0-13.37-7.93-19.27T797.7,35.89H777.19Z"/>
                        <path class="cls-1"
                              d="M999.75,157H981.18L931.71,91.6l-14.2,12.54V157H901.73V22.15h15.78V89l61.54-66.87h18.66L943.13,80.72Z"/>
                        <path class="cls-1"
                              d="M1143.69,22.15V109.4q0,23.05-14,36.25t-38.52,13.19q-24.5,0-37.92-13.29T1039.82,109V22.15h15.78v88q0,16.88,9.28,25.91t27.29,9q17.17,0,26.46-9.08t9.28-26.06V22.15Z"/>
                        <path class="cls-1"
                              d="M1279,121.11q0,17.8-13,27.76t-35.28,10q-24.13,0-37.13-6.18V137.53a97.82,97.82,0,0,0,18.2,5.53,95.67,95.67,0,0,0,19.49,2q15.78,0,23.76-6t8-16.55q0-7-2.83-11.48t-9.46-8.26q-6.65-3.78-20.19-8.58-18.94-6.72-27.06-16t-8.12-24.07q0-15.58,11.79-24.81t31.18-9.22a92.55,92.55,0,0,1,37.22,7.37l-4.91,13.65q-16.82-7-32.68-7-12.53,0-19.58,5.35t-7.06,14.85q0,7,2.6,11.48t8.77,8.21q6.18,3.73,18.89,8.26,21.36,7.56,29.38,16.23T1279,121.11Z"/>
                        <polygon class="cls-2" points="126.05 34.6 96.61 51.59 126.05 68.59 126.05 34.6"/>
                        <polygon class="cls-3" points="67.17 34.6 67.17 68.59 96.61 51.59 67.17 34.6"/>
                        <polygon class="cls-1" points="126.05 68.59 96.61 51.59 67.17 68.59 96.61 85.59 126.05 68.59"/>
                        <polygon class="cls-2" points="36.13 88.36 65.57 105.36 65.57 71.37 36.13 88.36"/>
                        <polygon class="cls-3" points="65.57 139.35 95.01 122.36 65.57 105.36 65.57 139.35"/>
                        <polygon class="cls-1" points="65.57 71.37 65.57 105.36 95.01 122.36 95.01 88.36 65.57 71.37"/>
                        <polygon class="cls-2" points="127.65 139.35 127.65 105.36 98.21 122.36 127.65 139.35"/>
                        <polygon class="cls-3" points="157.09 88.36 127.65 71.37 127.65 105.36 157.09 88.36"/>
                        <polygon class="cls-1" points="98.21 122.36 127.65 105.36 127.65 71.37 98.21 88.36 98.21 122.36"/>
                        <path class="cls-2"
                              d="M160.5,1H32.72A31.81,31.81,0,0,0,1,32.72V160.5a31.81,31.81,0,0,0,31.72,31.72h87.51L96.61,134.85,79.48,171.07H32.72A10.71,10.71,0,0,1,22.15,160.5V32.72A10.71,10.71,0,0,1,32.72,22.15H160.5a10.71,10.71,0,0,1,10.57,10.57V160.5a10.71,10.71,0,0,1-10.57,10.57H132.77l8.71,21.15h19a31.81,31.81,0,0,0,31.72-31.72V32.72A31.81,31.81,0,0,0,160.5,1Z"/>
                    </svg>
                </div>
            </div>
        </div>
        <div class="banner-wrapper">
            <div class="grid">
                <div class="banner">
                    <div class="grid">
                        <div class="callout">Congratulations!</div>
                        <div class="app-details">
                            <h5>Application</h5>
                            <ul>
                                <li>GroupId: <code>{project.group-id}</code></li>
                                <li>ArtifactId: <code>{project.artifact-id}</code></li>
                                <li>Version: <code>{project.version}</code></li>
                                <li>Quarkus Version: <code>{quarkus.version}</code></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="content-wrapper">
            <div class="grid">
                <div class="left-column">
                    <h1>You just made a Quarkus application.</h1>
                    <p>This page is served by Quarkus.</p>
                    <a href="/q/dev-ui/" class="cta-button">Visit the Dev UI</a>
                    <p>This page: <code>src/main/resources/META-INF/resources/index.html</code></p>
                    <p>App configuration: <code>src/main/resources/{config.file-name}</code></p>
                    <p>Static assets: <code>src/main/resources/META-INF/resources/</code></p>
                    <p>Code: <code>{language.dir.code}</code></p>
                    <p>Generated starter code:</p>
                    <ul class="provided-code">
                        {merged-content}
                    </ul>
                </div>
                <div class="right-column">
                    {#if input.selected-extensions}
                    <h3>Selected extensions</h3>
                    <ul>
                        {#for ext in input.selected-extensions}
                        {#if ext.guide}
                        <li title="{ext.description}">{ext.name} (<a href="{ext.guide}" target="_blank">guide</a>)</li>
                        {#else}
                        <li title="{ext.description}">{ext.name}</li>
                        {/if}
                        {/for}
                    </ul>
                    {/if}
                    <h5><a href="https://quarkus.io/guides/">Documentation</a></h5>
                    <p>Practical step-by-step guides to help you achieve a specific goal. Use them to help get your work
                        done.</p>
                    <h5><a href="{buildtool.guide}">Set up your IDE</a></h5>
                    <p>Everyone has a favorite IDE they like to use to code. Learn how to configure yours to maximize your
                        Quarkus productivity.</p>
                </div>
            </div>
        </div>
    </body>
</html>
{/if}
